<script setup>
import { ref, onMounted } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import {artDelChannelService, artGetChannelsService } from '@/api/article.js'
import ChannelEdit from "@/views/article/components/ChannelEdit.vue";
// 表格数据
const tableData = ref([
  {
    id: '2016-05-03',
    cate_name: 'Tom',
    cate_alias: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: '2016-05-02',
    cate_name: 'Tom',
    cate_alias: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: '2016-05-04',
    cate_name: 'Tom',
    cate_alias: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: '2016-05-01',
    cate_name: 'Tom',
    cate_alias: 'No. 189, Grove St, Los Angeles',
  },
])
// loading
const loading = ref(false)
// 分类列表
const channelList = ref([])
// 获取文章分类列表
const getChannelList = async () => {
  loading.value = true
  // const res = await artGetChannelsService() // .catch(() => loading.value = false)
  try {
    const res = await artGetChannelsService()
    console.log(res, '获取文章列表')
    loading.value = false
  } catch (error) {
    loading.value = false
  }
}
getChannelList()


const dialog = ref(null)
// 添加分类
const onAddChannel = () => {
  dialog.value.open({})
}
// 编辑
const onEditChannel = (row) => {
  dialog.value.open(row)
}
// 删除
const onDelChannel = async (row) => {
  try {
    await ElMessageBox.confirm(
      '确认删除此分类吗? ',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
    // await artDelChannelService({ id: row.id })
    ElMessage.success('删除成功')
    getChannelList()
  } catch (error) {

  }
}
// 刷新
const onSuccess = () =>{
  getChannelList()
}
</script>

<template>
  <page-container :title="'文章分类'">
    <template #extra>
      <el-button type="primary" @click="onAddChannel">添加分类</el-button>
    </template>
    <div>
      <el-table  v-loading="loading" :data="tableData" style="width: 100%">
        <template #empty>
          <el-empty description="无数据" />
        </template>
        <el-table-column type="index" label="序号" width="180"/>
        <el-table-column prop="cate_name" label="分类名称"  />
        <el-table-column prop="cate_alias" label="分类别名" />
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button
              :icon="Edit"
              circle
              plain
              type="primary"
              @click="onEditChannel(row)"
            ></el-button>
            <el-button
              :icon="Delete"
              circle
              plain
              type="danger"
              @click="onDelChannel(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </page-container>
  <channel-edit ref="dialog" @success="onSuccess"></channel-edit>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
